<template>

    <el-form :model="UserForm" :rules="RegiFormRules" ref="RegiFormRef" label-width="80px">
        <h2 class="Regi-title">编辑用户</h2>
        <!-- 用户名 -->
        <el-form-item prop="username" label="用户名">
            <el-input v-model="UserForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item prop="phone" label="手机号">
            <el-input v-model="UserForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item prop="email" label="邮箱">
            <el-input v-model="UserForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <!-- 选择权限 -->
        <el-form-item label="用户权限">
            <el-select v-model="UserForm.power" placeholder="请选择申请权限">
                <el-option v-for="(item,index) in PowerList" :key="index" :value='item.pname'>
                </el-option>
            </el-select>
        </el-form-item>
        <!-- 选择权限 -->
        <el-form-item label="所属公司">
            <el-select v-model="UserForm.company" placeholder="请选择所属公司">
                <el-option v-for="(item,index) in CompList" :key="index" :value='item.name'>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item class="El-Button-Submit">
            <el-button type="primary" @click="SubmitUpdate">提交</el-button>
            <el-button type="info" @click="ResetReg">重置</el-button>

        </el-form-item>
    </el-form>

</template>

<script>
import { update_user_put, power_list_get } from '../axios_api/api'
export default {
    props: {
        UserForm: Object,
    },
    data() {
        return {
            // 这是表单的验证规则对象
            RegiFormRules: {
                // 验证用户是否合法
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[a-zA-Z]([a-zA-Z0-9]){5,16}$/, message: '用户名以字母开头，且长度在 6 到 16 个字符' },
                ],
                // 验证手机号是否符合规范
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '手机号格式错误' },
                ],
                // 验证手机号是否符合规范
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/, message: '邮箱格式错误' },
                ],
            },
            PowerList: [],
            CompList: [],
        }
    },
    mounted() {
        this.get_power();
    },
    methods: {
        // 提交修改
        SubmitUpdate() {
            let UpdateUserForm = this.UserForm;
            this.$refs.RegiFormRef.validate(valid => {
                if (!valid) return;
                // 遍历将公司名转换成公司id，以便于后端存入数据库
                for (let i = 0; i < this.CompList.length; i++) {
                    // 如果选择的公司名跟数据库中的公司名一样
                    if (this.CompList[i].name === UpdateUserForm.company) {
                        // 将comp变量等于该公司的id
                        UpdateUserForm.company = String(this.CompList[i].id)
                    }
                }
                for (let j = 0; j < this.PowerList.length; j++) {
                    // 如果选择的公司名跟数据库中的公司名一样
                    if (this.PowerList[j].pname === UpdateUserForm.power) {
                        // 将comp变量等于该公司的id
                        UpdateUserForm.power = String(this.PowerList[j].id)
                    }
                }
                // 发起注册提交请求
                update_user_put(UpdateUserForm).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.$router.go(0)
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            })
        },
        // 重置输入数据
        ResetReg() {
            this.$refs.RegiFormRef.resetFields();
            this.RegUserForm.company = '';
            this.RegUserForm.power = '';
        },
        // 获取权限及公司列表
        get_power() {
            power_list_get().then(resp => {
                if (resp.code === 200) {
                    this.PowerList = resp.powerlist
                    this.CompList = resp.complist
                    console.log(this.PowerList)
                    console.log(this.CompList)
                }
            })
        }
    },
}
</script>

<style>
</style>